<template>
  <div>
    <el-calendar v-model="selectedDate" @input="submitForm"></el-calendar>
    <div v-if="loading">正在加载...</div>
    <div v-else-if="dataResult">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="weekend" label="星期" width="180">
        </el-table-column>
        <el-table-column prop="teacher" width="100" label="姓名">
        </el-table-column>
        <el-table-column prop="subject" width="500" label="课程">
        </el-table-column>
        <el-table-column prop="time" label="时间"> </el-table-column>
        <el-table-column prop="morningOrAfternoon" label="上/下午">
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="100">
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.row)" type="text" size="small"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-dialog title="修改课表" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <div class="edit-list">
            <span>课程：{{ form.subject }}</span>
          </div>
          <div class="edit-list">
            <span>上课日期：{{ form.date }}</span>
          </div>
          <div class="edit-list">
            <span>上课时间：{{ form.time }}</span>
          </div>
          <el-form-item label="讲师">
            <el-select v-model="form.teacher" placeholder="">
              <el-option
                v-for="teacherName in teacherList"
                :key="teacherName.id"
                :label="teacherName.name"
                :value="teacherName.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleClick()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import paiKeApi from "@/api/paike/getPaike";
import { DatePicker } from "element-ui";
import lang from "element-ui/lib/locale/lang/zh-CN";
import locale from "element-ui/lib/locale";
import authorization from "@/api/paike/authorization";
locale.use(lang);
export default {
  data() {
    return {
      selectedDate: new Date(),
      loading: false,
      dataResult: null,
      tableData: [{}],
      dialogFormVisible: false,
      form: {
        subject: "",
        date: "",
        time: "",
        teacher: "",
      },
      teacherList: [],
      rowId: {}, //不用于展示，是为了方便存放数据
      // date: "", //不用于展示，是为了方便存放数据
    };
  },
  methods: {
    getDateDetail: async function (selectedDate) {
      let list = await paiKeApi.getpaikeForTheDate(selectedDate);
      if (list.code == "20000") {
        this.loading = false;
        this.dataResult = list.message;
        this.tableData = list.data;
      } else {
        this.$message({
          message: `${list.message}`,
          type: "warning",
        });
      }
    },
    submitForm: async function () {
      this.loading = true;
      // 发送选定的日期至服务器
      console.log(this.selectedDate);
      this.getDateDetail(this.selectedDate);
    },

    //打开编辑按钮，显示拥有该模块授权的教员
    handleEdit: async function (row) {
      this.rowId = row;
      let model = row.subject;
      model = model.substring(0, 2);
      let res = await authorization.getAuthorization(model, row.teacher);
      if (res.code == 20000 && res.message == "成功") {
        this.teacherList = res.data;
        this.dialogFormVisible = true;
        //需要从服务器拿到能上课的所有教员列表
        const { subject, date, time, teacher } = row;
        this.form = { subject, date, time, teacher };
      } else {
        this.$message({
          message: `${res.message}`,
          type: "warning",
        });
      }
    },
    //点击确定，将修改后的教员传送到后端，修改新的课表，一般用于某位教员没时间找别的教员代课
    handleClick: async function () {
      let teacher = this.form.teacher;
      let { date, subject, time } = this.rowId;
      //TODO 后续将{date,subject,time}这三个数据传到服务器进行查询
      const playload = {date, subject, time,teacher}
      let res = await paiKeApi.updatePaiKe(playload);
      if (res.code == 20000 && res.message == "成功") {
        this.$message({
          message: `${res.data}`,
          type: "success",
        });
        this.dialogFormVisible = false;
        this.getDateDetail(this.selectedDate);
      } else {
        this.$message({
          message: `${res.message}`,
          type: "warning",
        });
      }
    },
  },
  components: {
    DatePicker,
  },
  created() {
    // 在实例创建完成后执行的逻辑
    const currentDate = new Date();
    this.getDateDetail(currentDate);
  },
};
</script>
<style scoped>
.edit-list {
  margin-top: 20px;
  margin-bottom: 20px;
}
</style>